<template>
    <div class="app">
       <div v-for="(item,index) of movies" :key="index">
           <p>{{index |handleTitle}}</p>
           <div class="nav">
           <div class="coke" v-for="val of item" :key="val.id">
               <img class="cli" :src="val.pic" alt="">
           </div>
       </div>
       </div>
    </div>
</template>

<script>
import MovieHttp from '../../models/Https'
export default {
    data() {
        return {
            movies:{}
        };
    },

  async mounted() {
      let movies ={}
      var https =["top250","inTheaters","comingSoon"];
      for(let url of https){
          let result =await MovieHttp.getMovie(url);
          console.log(result.data);
          movies[url] =result.data.res.slice(0,3)
      }
        this.movies =movies
    }, 

    methods: {
    },
    filters:{
        handleTitle(val){
            console.log(val);
            if(val=="inTheaters"){
                return "正在热映"
            }else if(val == "comingSoon"){
                return "即将上映"
            }else if(val =="top250"){
                return "top250"
            }
        }
    }
};
</script>

<style  scoped>
.nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>